<template>
  <div class="dialog">
    <!-- 动力柜弹窗控件 -->
    <a-modal
      width="60%"
      :visible="Dialog"
      @cancel="closeDialog"
      :closable="true"
      :mask-closable="true"
      destroy-on-close
      :footer="null"
    >
      <div slot="title" class="clearfix">
        <div class="title">
          <img class="title_img" src="@/assets/img/chart/time.png" alt="" srcset="" />
          <span class="title_time">{{ getDate() }}</span>
        </div>
        <span class="title_top">动力柜详情</span>
      </div>
      <a-row :gutter="20" type="flex" align="middle">
        <a-col :span="10">
          <dongligui :data="modalParams"></dongligui>
        </a-col>
        <a-col :span="12" style="float: right">
          <a-row style="margin-top: 20%">
            <a-col :span="12">
              <a-row>
                <a-col :span="24">
                  <div class="title_item">
                    <span>当班耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !queryInfo.shiftConsumption ? '0.00' : Number(queryInfo.shiftConsumption).toFixed(2)
                    }}</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <div class="title_item">
                    <span>当天耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !queryInfo.dayConsumption ? '0.00' : Number(queryInfo.dayConsumption).toFixed(2)
                    }}</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <div class="title_item">
                    <span>电流(A)</span>
                    <span class="title_value">{{
                      !queryInfo.electricCurrent ? '0.00' : Number(queryInfo.electricCurrent).toFixed(2)
                    }}</span>
                  </div>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12">
              <a-row>
                <a-col :span="24">
                  <div class="title_item">
                    <span>当周耗电量(kw·h)</span>
                    <span class="title_value">
                      {{ !queryInfo.weekConsumption ? '0.00' : Number(queryInfo.weekConsumption).toFixed(2) }}
                    </span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <div class="title_item">
                    <span>当月耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !queryInfo.monthConsumption ? '0.00' : Number(queryInfo.monthConsumption).toFixed(2)
                    }}</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <div class="title_item">
                    <span>总耗电量(kw·h)</span>
                    <span class="title_value">{{
                      !queryInfo.totalConsumption ? '0.00' : Number(queryInfo.totalConsumption).toFixed(2)
                    }}</span>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-row style="margin-top: 10px; margin-right: 5px">
          <img src="@/assets/img/chart/sbsj.svg" alt="" srcset="" />
          <img src="@/assets/img/chart/dldy.svg" style="float: right" alt="" srcset="" />
        </a-row>
        <a-row>
          <a-table
            :columns="columns"
            :data-source="tableData"
            :scroll="{ y: 300 }"
            :pagination="false"
            :locale="localeObj"
          >
            <a-space slot="toFix2" slot-scope="text, record">
              <span>{{ Number(text).toFixed(2) }}</span>
            </a-space>
          </a-table>
        </a-row>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import { getPowerDetailsStatistics, powerDetails } from '@/api/customApi'
import dongligui from '../../dongligui'
export default {
  name: 'dialog_dongli',
  components: {
    dongligui
  },
  data() {
    return {
      Dialog: false,
      isLoading: true,
      title: '',
      flag: '',
      title_l: '',
      itemData: {},
      data: '',
      tableData: [],
      modalParams: {},
      localeObj: {
        emptyText: (
          <div>
            <a-icon type="loading" style="width: 50px; height: 50px" />
            <p class="ant-empty-description">通信故障</p>
          </div>
        )
      },
      queryInfo: {
        shiftConsumption: 0,
        dayConsumption: 0,
        current: 0,
        weekConsumption: 0,
        monthConsumption: 0,
        totalConsumption: 0
      },
      columns: [
        {
          title: '工序',
          dataIndex: 'productCategoryTxt',
          align: 'productCategoryTxt'
        },
        {
          title: '设备编号',
          dataIndex: 'deviceNo',
          align: 'center',
          sorter: (a, b) => a.deviceNo - b.deviceNo
        },
        {
          title: '品种',
          dataIndex: 'productTypeTxt',
          align: 'center'
        },
        {
          title: '当班长度（米）',
          dataIndex: 'shiftLength',
          align: 'center',
          scopedSlots: { customRender: 'toFix2' }
        },
        {
          title: '当前班产（KG）',
          dataIndex: 'shiftOutput',
          align: 'center',
          scopedSlots: { customRender: 'toFix2' }
        },
        {
          title: '当前电流(A)',
          dataIndex: 'electricCurrent',
          align: 'center',
          scopedSlots: { customRender: 'toFix2' }
        },
        {
          title: '实时平均电压（V）',
          dataIndex: 'electricVoltage',
          align: 'center',
          sorter: (a, b) => a.electricVoltage - b.electricVoltage,
          scopedSlots: { customRender: 'toFix2' }
        },
        {
          title: '当班耗电量(kw·h)',
          dataIndex: 'shiftConsumption',
          align: 'center',
          sorter: (a, b) => a.shiftConsumption - b.shiftConsumption,
          scopedSlots: { customRender: 'toFix2' }
        },
        {
          title: '当天耗电量(kw·h)',
          dataIndex: 'dayConsumption',
          align: 'center',
          sorter: (a, b) => a.dayConsumption - b.dayConsumption,
          scopedSlots: { customRender: 'toFix2' }
        },
        {
          title: '当月耗电量(kw·h)',
          dataIndex: 'monthConsumption',
          align: 'center',
          sorter: (a, b) => a.monthConsumption - b.monthConsumption,
          scopedSlots: { customRender: 'toFix2' }
        }
      ]
    }
  },

  mounted() {},
  computed: {
    dongLiNewestState() {
      let result
      if (this.$store.state.socketData.length != 0) {
        result = this.$store.state.socketData.filter(item => item.workshop == this.$store.state.workshopNo)
        result = result[0].dsDeviceRealTimeStatusListPowerCabinet
      }
      return result
    }
  },
  watch: {
    dongLiNewestState: {
      immediate: true,
      handler(val) {
        console.log('dongli==', val.code)
        this.isLoading = false
      }
    }
  },
  methods: {
    // 当前时间
    getDate() {
      let nowDate = new Date()
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      return date.year + '-' + date.month + '-' + date.date
    },
    getInfo() {
      let query1 = {
        company: '1771136798305476610',
        workshop: this.modalParams.workshop,
        consumptionDeviceNo: this.modalParams.deviceNo,
        productCategory: this.modalParams.productCategory
      }
      let query2 = {
        company: '1771136798305476610',
        workshop: this.modalParams.workshop,
        consumptionDeviceNo: this.modalParams.deviceNo,
        productCategory: this.modalParams.productCategory
      }
      getPowerDetailsStatistics(query1).then(res => {
        this.queryInfo = res.result[0]
        console.log('this.queryInfo', this.queryInfo)
      })
      powerDetails(query2).then(res => {
        this.tableData = res.result
        console.log('this.tableData', this.tableData)
      })
    },
    showDialog(data) {
      console.log('dongliData', data)
      this.Dialog = true
      this.modalParams = data
      this.modalParams.deviceNo = data.deviceNo
      this.tableData = []
      this.isLoading = true
      this.flag = data.title
      this.modalParams.workshop = this.$store.state.workshopNo
      this.getInfo()
      this.title = '立华' + this.$store.state.workshopNo + '纺' + data.title + '详情'
    },
    closeDialog() {
      this.tableData = []
      this.Dialog = false
      this.isLoading = true
      this.$parent.closeHandle()
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
.a-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
::v-deep.a-table {
  overflow-y: hidden !important;
}
</style>
